<template>
    <div>
        <div class="menus">
            <ul>
                <router-link tag="li" to="/default">默认页面</router-link>
                <router-link tag="li" to="/careful">注意事项</router-link>
                <router-link tag="li" to="/style">单文件组件样式</router-link>
                <router-link tag="li" to="/ajax">数据交互</router-link>
                <router-link tag="li" to="/util">工具模块化</router-link>
                <router-link tag="li" to="/corse">跨域代理</router-link>
                <router-link tag="li" to="/plugin">插件开发</router-link>
                <router-link tag="li" to="/router">路由</router-link>
            </ul>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                { name: "默认页面", path: "DefaultPage" },
                { name: "注意事项", path: "CarefulPage" },
                { name: "单文件组件样式", path: "ComponentSyle" },
                { name: "数据交互", path: "AjaxPage" },
                { name: "工具模块化", path: "AjaxUtil" },
                { name: "跨域代理", path: "AjaxCorse" },
                { name: "插件开发", path: "PluginPage" },
                { name: "路由的安装", path: "RouterInstall" },
            ],
        };
    },
};
</script>
<style scoped>
.menus {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    /* height: 70px; */
    overflow-x: auto;
    color: white;
    white-space: nowrap;
    background-color: #303643;
}
.menus ul {
    margin: 0px;
    list-style: none;
}
.menus li {
    display: inline-block;
    line-height: 50px;
    padding: 0px 20px;
    cursor: pointer;
}
/* .menus li.active {
    font-weight: bolder;
    color: tomato;
} */
</style>
<style>
body {
    padding-top: 70px;
    margin-bottom: 800px;
}
pre {
    font-size: 18px;
    white-space: pre-wrap;
}
pre > img {
    width: 600px;
    height: 200px;
    object-fit: contain;
    object-position: left;
}
pre > code {
    font-size: 14px;
}
.router-link-active , .router-link-exact-active{
    font-weight: bolder;
    color: tomato;
}
.active{
    font-weight: bolder;
    color: tomato;
}
/* .ex-active{
    color: brown;
} */
</style>
